<!--
 * @Author: gyc
 * @Date: 2020-06-17 15:53:21
 * @LastEditTime: 2020-07-09 16:10:58
 * @Description: Nuxt测试版
--> 
<template>
  <div class="article-box">
    <p>1.大大大撒多按时按时阿萨德大叔大婶阿萨德阿萨德阿萨德阿萨德按时啊按时按时都</p>
    <Icon type="md-star" size="18" class="article-box-icon" />
  </div>
</template>

<script>
export default {
  name: "articleBox"
};
</script>

<style lang="scss" scoped>
.article-box {
  display: flex;
  width: 100%;
  height: 100%;
  min-width: 250px;
  font-size: 15px;
  // padding-left: 5px;
  justify-content: space-between;
  p {
    cursor: pointer;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 24px;
    
  }
  &:hover p {
    color: $gcolor;
    font-size: 16px;
    font-weight: 600;
  }
  &:hover .article-box-icon {
    display: inline-block;
  }
  .article-box-icon {
    cursor: pointer;
    height: 18px;
  }
}
</style>